今天要來介紹變數的作用域也就是他們之間的作用範圍!在ES6之前變數的有效範圍最小單位是用function來做分界的，但在ES6之後新增了let與const後有了變動，但在介紹宣告變數的差別之前先來說明全域變數與區域變數。

全域變數與區域變數

何謂全域變數? 顧名思義就是在哪裡都能夠使用到這個變數
何謂區域變數? 被限縮在一個範圍裡，只有這個範圍能夠使用到此變數

舉例:

var x = 1
function ck(y) {
var x = 50
return x * y
}

console.log(x)
console.log(ck(2)) 

這兩組的答案分別會是1和100。

為什麼呢?

先想想我們先前的 「在ES6之前變數的有效範圍最小單位是function」

也就是說在外面定義的變數與在函式內定義的變數，雖然都為x但是在函式內宣告的變數只有那個函式能夠使用，自然而然會蓋掉原先在外面宣告的變數，但也沒辦法拿出來使用!

而這種變數有效範圍我們稱作為 「Scope」

但要注意，有一種情況是如果這個函式找不到函式內有定義x這個變數，會自動往外面找，盡而找到最外層宣告的x，答案就會不同了!

var x = 1
function ck(y) {
return x * y
}

console.log(x) // 1
console.log(ck(2)) // 2

函式可以讀取外層宣告的變數，但外面拿不到函式內的變數

宣告的重要性

切記，一般而言使用變數的時候一定都會宣告，如果沒有宣告就會變成全域變數，等於是全站都能夠使用，這非常危險所以建議一定要宣告

我們現在看看新的情況，如果將剛剛函式內宣告拿掉答案會不會有不同?

var x = 1
function ck(y) {
 x = 50
return x * y
}
console.log(ck(2)) 
console.log(x)

答案會印出 100 和 50

你心裡一定會想著WTX!!! 沒錯我當初也跟你一樣覺得這個太不可思議了

原本所說的 「變數的有效範圍最小單位是function」 ，前提要是你在函式內有再次宣告變數，否則JS會一直往外找那個x，直到找到最外層。

再回來看看現在的情況，函式內的x變數因為沒有宣告的緣故變成了全域變數，所以這個x到了最外層的同名的變數x而不是被限制在函式內。

導致在呼叫ck()之後再印出來的x變數都會是50。

如果今天情況是先印出x在呼叫ck()，那麼答案就會是1、100

所以說如果沒有特別的情況的話記得一定都要宣告啊!
今天就講到這邊，大家明天見!